<template>
  <div>

    <RecycHeader ref="RecycHeader" />

    <!-- 表格 -->
    <div class="table">

      <el-table class="file_table" ref="fileTable" :data="fileData" style="width: auto"
        :show-header="folderData.length == 0">
        <el-table-column type="selection" />

        <el-table-column label="文件名" width="auto">
          <template slot-scope="scope">
            <div style="display: flex;">
              <i class="el-icon-document icon-table" v-if="scope.row.type=='DOCUMENT_FILE'"></i>
              <i class="el-icon-video-camera-solid icon-table" v-if="scope.row.type=='VIDEO_FILE'"></i>
              <i class="el-icon-collection icon-table" v-if="scope.row.type=='OTHER_FILE'"></i>

              <el-image class="icon-table" style="width: 50px; height: 50px" :src="http+scope.row.virtualPath"
                fit="fill" v-if="scope.row.type == 'IMAGE_FILE'">
              </el-image>

              <i style="font-weight:bold;" class="el-icon-folder-opened icon-table" v-if="scope.row.type==null"></i>

              <a v-if="scope.row.folderId != null" title="点击预览"
                :href="scope.row.virtualPath != ''?http + scope.row.virtualPath:'previewErr'" target="_blank"
                style="text-decoration: none;align-self: center;color: #000;">{{scope.row.fileName}}</a>
              <a v-else title="打开文件夹"
                style="text-decoration: none;align-self: center; cursor: pointer;font-weight:bold;"
                @click="folderPreview(scope.row)">{{scope.row.folderName}}</a>

            </div>
          </template>
        </el-table-column>

        <el-table-column label="修改时间" width="150px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>


        <el-table-column prop="size" label="大小" width="100px"></el-table-column>

      </el-table>


    </div>

    <!-- 分页 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
  import router from "@/router"
  import apiUrl from '@/api/url'
  import link from '@/api/Link'
  import sizeTostr from '@/util/FileSizeUtil'
  import RecycHeader from '@/components/RecycHeader.vue'

  export default {
    name: "Recycling",
    components: {
      RecycHeader,

    },
    data () {
      return {
        http: apiUrl.baseUrl,
        pageSize: 5,
        pageSizes: [5, 10, 20, 30],
        currentPage: 1,
        total: 0,
        fileData: [],
        folderData: [],

        keyWord: '',
      }
    },
    methods: {
      init () {

        let data = {
          name: this.keyWord,
        }
        link(apiUrl.baseUrl + '/sys/recycling/findByPage/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code == 0) {
            this.total = ok.data.data.total
            this.fileData = []
            for (let i = 0; i < ok.data.data.folders.length; i++) {
              this.fileData.push(ok.data.data.folders[i])
            }
            for (let i = 0; i < ok.data.data.files.length; i++) {
              ok.data.data.files[i].size = sizeTostr(ok.data.data.files[i].size)
              this.fileData.push(ok.data.data.files[i])
            }
          } else {
            this.$message({
              message: ok.data.msg,
              type: "error",
            });
          }
        })

      },

      //文件夹部分表查看按钮
      folderPreview (row) {
        this.$refs.RecycHeader.folderIds = row.id

      },
      //文件部分查看按钮
      preview (row) {
        if (row.virtualPath) {
          window.open(apiUrl.baseUrl + row.virtualPath)
        } else {
          let page = this.$router.resolve({
            name: 'previewErr',
          })
          window.open(page.href, '_blank');
        }
      },

      //分页监控
      handleCurrentChange (val) {
        this.currentPage = val
        this.init()
      },
      //分页监控
      handleSizeChange (val) {
        this.pageSize = val;
        this.init()
      },

    },
    mounted () {
      this.init()
    },
    watch: {

    }
  };
</script>

<style scoped>
  .folder_table {
    /* margin-bottom: 20px; */
  }

  .table {
    width: 90%;
  }

  .icon-table {
    margin-right: 10px;
    display: flex;
    align-self: center;
  }
</style>